import React, {useEffect, useState} from "react";
import {Button, Drawer, Form, Input, message, Space, Table, Typography, Upload} from "antd";
import axios from "axios";

export const TaskOrder: React.FC = () => {
    const [dataSource, setDataSource] = useState([])
    const [dataSourceDate, setDataSourceDate] = useState([])
    const [open, setOpen] = useState(false);
    const [openDate, setOpenDate] = useState(false);
    const [formQuery] = Form.useForm();
    const [formEditor] = Form.useForm();
    const columns = [
        {
            title: '任务单代码',
            dataIndex: 'taskCode',
            key: 'taskCode',
        },
        {
            title: '任务单名称',
            dataIndex: 'taskName',
            key: 'taskName',
        },
        {
            title: '操作',
            dataIndex: '_operation',
            render: (_text: any, record: any) => {
                return (
                    <Space>
                        <Typography.Link onClick={() => {
                            formEditor.setFieldsValue(record)
                            setOpen(true)
                        }}>
                            编辑
                        </Typography.Link>
                        <Typography.Link onClick={() => {
                            axios.post('/api/taskOrder/removeById', record).then(res => {
                                if (res.status === 200) {
                                    search()
                                }
                            })
                        }}>
                            删除
                        </Typography.Link>
                        <Upload
                            name={'file'}
                            action={'/api/taskOrder/upload'}
                            data={record}
                            maxCount={1}
                            showUploadList={false}
                            onChange={(info) => {
                                console.log('info', info)
                                if (info.file.status === 'error') {
                                    message.error(`${info.file.response.message}`);
                                }
                            }}
                        >
                            <Typography.Link>
                                上传工时
                            </Typography.Link>
                        </Upload>
                        <Typography.Link onClick={() => {
                            searchDate(record.id)
                            setOpenDate(true)
                        }}>
                            工时详情
                        </Typography.Link>
                    </Space>
                )
            },
        },
    ]

    useEffect(() => {
        search()
    }, []);

    const search = () => {
        setDataSource([])
        formQuery.validateFields()
            .then(values => {
                axios.post('/api/taskOrder/search', values).then(res => {
                    if (res.status === 200) {
                        setDataSource(res.data)
                    }
                })
            })
            .catch(errorInfo => {
                console.log('errorInfo', errorInfo)
            });
    }

    const searchDate = (taskOrderId: string) => {
        setDataSourceDate([])
        axios.post('/api/taskOrderPersonDate/search', {taskOrderId}).then(res => {
            if (res.status === 200) {
                setDataSourceDate(res.data)
            }
        })
    }

    return (
        <div>
            <Form form={formQuery}
                  labelCol={{span: 2}}>
                <Form.Item label="任务单代码" name="taskCode">
                    <Input/>
                </Form.Item>
                <Form.Item label="任务单名称" name="taskName">
                    <Input/>
                </Form.Item>
                <Form.Item>
                    <div style={{width: '100%', textAlign: 'right'}}>
                        <Button type="primary" onClick={() => search()}>
                            查询
                        </Button>
                        <Button htmlType="button" onClick={() => formQuery.resetFields()} style={{marginLeft: '8px'}}>
                            重置
                        </Button>
                    </div>
                </Form.Item>
            </Form>
            <div>
                <Button type="primary" onClick={() => {
                    formEditor.resetFields()
                    setOpen(true)
                }}>
                    新增
                </Button>
            </div>
            <Table dataSource={dataSource} columns={columns}/>
            <Drawer title="任务单" placement="right" onClose={() => setOpen(false)} open={open} footer={
                <Button type="primary" onClick={() => {
                    formEditor.validateFields()
                        .then(values => {
                            axios.post('/api/taskOrder/saveOrUpdate', values).then(res => {
                                if (res.status === 200) {
                                    setOpen(false)
                                    search()
                                }
                            })
                        })
                        .catch(errorInfo => {
                            console.log('errorInfo', errorInfo)
                        });
                }}>
                    保存
                </Button>
            }>
                <Form form={formEditor} labelCol={{span: 6}} validateMessages={{required: "请输入${label}！"}}>
                    <Form.Item label="id" name="id" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="任务单代码" name="taskCode" rules={[{required: true}]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="任务单名称" name="taskName" rules={[{required: true}]}>
                        <Input/>
                    </Form.Item>
                </Form>
            </Drawer>
            <Drawer title="工时详情" placement="right" onClose={() => setOpenDate(false)} open={openDate} width={'80%'}>
                <Table dataSource={dataSourceDate} columns={[
                    {
                        title: '职级',
                        dataIndex: 'rank',
                        key: 'rank',
                    },
                    {
                        title: '姓名',
                        dataIndex: 'personName',
                        key: 'personName',
                    },
                    {
                        title: '岗位',
                        dataIndex: 'job',
                        key: 'job',
                    },
                    {
                        title: '账号',
                        dataIndex: 'account',
                        key: 'account',
                    },
                    {
                        title: '日期',
                        dataIndex: 'date',
                        key: 'date',
                    },
                    {
                        title: '钉钉考勤时长',
                        dataIndex: 'dingdingcheckinduration',
                        key: 'dingdingcheckinduration',
                    },
                    {
                        title: '禅道工时',
                        dataIndex: 'zentaoworkhours',
                        key: 'zentaoworkhours',
                    },
                    {
                        title: '待确认工时',
                        dataIndex: 'pendingconfirmationhours',
                        key: 'pendingconfirmationhours',
                    },
                    {
                        title: '核减工时',
                        dataIndex: 'reducedhours',
                        key: 'reducedhours',
                    },
                    {
                        title: '验收工时',
                        dataIndex: 'acceptedhours',
                        key: 'acceptedhours',
                    },
                    {
                        title: '核减原因',
                        dataIndex: 'reductionreason',
                        key: 'reductionreason',
                    },
                ]} scroll={{y: 'calc(100vh - 250px)'}}/>
            </Drawer>
        </div>
    )
}